<template>
	<view class="user-level">
		<g-navbar title="晋升申请" />
		<view class="level-list-scroll-wrapper">
			<scroll-view :scroll-x="isScroll" style="width: 100%;height: 100%;"
				:scroll-into-view="`level${scrollLevel}`" scroll-with-animation @scroll="scroll">
				<view class="list-wrapper">
					<view class="level-item-wrapper" v-for="item,index in levelList" :key="index" :id="`level${index}`"
						@click="onClickItem(item.type)">
						<image :src="item.card" style="width: 100%;height: 100%;" />
						<view class="label">{{labelText(item.type)}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="level-introduce-container" v-if="levelList[scrollLevel]&&levelList[scrollLevel].desc">
			<view class="title">
				{{levelList[scrollLevel].title}}
			</view>
			<view class="content">
				<rich-text :nodes="levelList[scrollLevel].desc" />
			</view>
		</view>
		<view class="btn-wrapper">
			<button class="level-up-btn" :disabled="currentLevel>=levelList.length"
				@click="applyPromotion">{{currentLevel<levelList.length-1?`成为${levelList[currentLevel+1].name}`:'已是最高等级'}}</button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onMounted, reactive, Ref, ref, computed } from "vue";
	import global from '@/global';
	import type { IUserLevelType } from '@/global';
	import { useStore } from 'vuex';
	import { onLoad } from '@dcloudio/uni-app';
	import { USER_LEVEL_TYPE } from "@/enum/level";
	import { ILevelItem } from './types';
	import REST_URL from "@/http/http.restUrl";
	import { throttle } from '@/utils';



	const store = useStore();

	// const levelList : { [USER_LEVEL_TYPE : number] : ILevelItem } = reactive(global.userLevelTypeList);

	const levelList : ILevelItem[] = reactive([]);

	for (let key in global.userLevelTypeList) {
		levelList.push(global.userLevelTypeList[key]);
	}

	console.log(levelList)


	const currentLevel : Ref<number> = ref(USER_LEVEL_TYPE.NORMAL);

	const scrollLevel : Ref<number> = ref(USER_LEVEL_TYPE.NORMAL);

	const isScroll : Ref<boolean> = ref(true);


	const labelText = computed(() => {
		return (level : USER_LEVEL_TYPE) => {
			if (currentLevel.value === level) {
				return '当前阶段：'
			} else if (currentLevel.value === level + 1) {
				return '上一阶段：'
			} else if (currentLevel.value === level - 1) {
				return '下一阶段：'
			}
		}
	})


	onLoad(async () => {
		await uni.loginManger.$interceptor;
		currentLevel.value = store.state.userInfo.customer_type;
		scrollLevel.value = store.state.userInfo.customer_type;
		getDescByCurrentType();
	})

	const getDescByCurrentType = async () : Promise<void> => {
		const current = scrollLevel.value;
		if (levelList[current].desc) return
		const result = (await uni.http.POST(REST_URL.promotionPolicy, {
			level: current,
		})).data
		console.log(result)
		levelList[current].desc = result.content;
		levelList[current].title = result.title;
	}

	const onClickItem = (level : USER_LEVEL_TYPE) => {
		scrollLevel.value = level;
		getDescByCurrentType();
	}

	const applyPromotion = async () => {
		try {
			await uni.http.POST(REST_URL.applyPromotion);
			uni.prompt.$showToast('晋升成功');
			currentLevel.value = currentLevel.value + 1;
		} catch (e) {
			if (e.status == 300) {
				uni.showModal({
					title: '前往申领机器',
					content: e.msg,
					confirmText:'前往申请机器',
					confirmColor:'#018AE6',
					cancelText:'取消',
					success: (res) => {
						if (res.confirm) {
							uni.router.route('/pages/device/device')
						} 
					}
				})
			}
		}
	}

	const scroll = (e) => {
		throttle(() => {
			// console.log(e)
			//每一个模块的实际像素
			const itemWidth = uni.getWindowInfo().screenWidth * 600 / 750;
			// console.log(Math.floor(e.detail.scrollLeft / (itemWidth - (itemWidth *.2))))
			isScroll.value = false;
			scrollLevel.value = (Math.floor(e.detail.scrollLeft / (itemWidth - (itemWidth * .2))));
			isScroll.value = true;
			getDescByCurrentType();
		}, 100)
	}
</script>

<style scoped lang="scss">
	@import "./userLevel.scss";
</style>